<template>
	<div :class="curClassName" :style="curStyle">
		<van-field
			v-model="curValue"
			size="large"
			:type="defaultType"
			:disabled="disabled"
			:readonly="readonly"
			:placeholder="curCaption"
			@input="onChange"
		>
			<template #left-icon v-if="defaultIcon == 'user-outlined'">
				<van-icon name="user-circle-o" />
			</template>
			<template #left-icon v-else-if="defaultIcon == 'key-outlined'">
				<AppIcon iconClass="fa fa-key"></AppIcon>
			</template>
		</van-field>
	</div>
</template>
<script setup lang="ts">
import { LoginInputProps } from './login-input';
import { IEvent } from '@/core';
import { Ref } from 'vue';
const props = defineProps(LoginInputProps);

interface LoginInputEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const emit = defineEmits<LoginInputEmit>();

/**
 * 当前值
 *
 * @type {any}
 * @memberof AppLoginInput
 */
const curValue = ref('');

/**
 * 项名称
 *
 * @memberof AppLoginInput
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 标题
 *
 * @memberof AppLoginInput
 */
const curCaption = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.caption;
	}
});

/**
 * 当前容器样式
 *
 * @memberof AppLoginInput
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 * 类名
 *
 * @memberof AppLoginInput
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return `app-login-input ${itemName.value} ${layoutModel.sysCss || ''}`;
	}
});

/**
 * 禁用
 *
 * @memberof AppLoginInput
 */
const disabled = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.disabled;
	}
});

/**
 * 只读
 *
 * @memberof AppLoginInput
 */
const readonly = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.readonly;
	}
});

watch(
	() => props.value,
	(newVal: any, oldVal: any) => {
		curValue.value = newVal;
	},
	{
		immediate: true,
	}
);

/**
 * 值改变
 *
 * @memberof AppLoginInput
 */
const onChange = ($event: any) => {
	let value = $event.target.value;
	emit('component-action', {
		name: props.name,
		action: 'valueChange',
		data: value,
	});
};
</script>
